<template>
  <Card title="通话登记" line>
    <FormContainer :column="4" :disabled="visible">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <!-- <el-form-item prop="platform" label="电商平台">
              <el-select v-model="formData.platform" placeholder="请输入选择电商平台" clearable filterable>
                <el-option v-for="(p,i) in platformList" :key="i" :value="p.value" :label="p.label" />
              </el-select>
            </el-form-item> -->
        <el-form-item prop="crmCallObject" label="通话对象">
          <el-select v-model="formData.crmCallObject" placeholder="请选择通话对象" clearable filterable>
            <el-option v-for="(o,i) in ObjectList" :key="i" :value="o.dictCode" :label="o.dictName" />
          </el-select>
        </el-form-item>
        <el-form-item prop="crmCustomerCode" label="客户编码">
          <el-input v-model.trim="formData.crmCustomerCode" placeholder="请输入客户编号" clearable />
        </el-form-item>
        <el-form-item prop="content" label="内容备注" :span="24">
          <el-input v-model="formData.content" type="textarea" :autosize="{minRows:4}" placeholder="请输入内容备注" clearable />
          <p class="input-tip">剩余{{ count }}字</p>
        </el-form-item>
        <el-form-item>
          <Button type="primary" @click="confirmHandle">保存通话</Button>
          <Button type="primary" @click="resetForm">重置</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
  </Card>
</template>
<script>
import Card from '@/components/Card'
import FormContainer from '@/components/FormContainer'
import { getValueByChain, deepCopy } from '@/utils'
import { ccDict } from '@/api/dataDict'
import { putCreate } from '@/api/telRecord'
export default {
  name: 'DisplayCallReg',
  components: {
    Card,
    FormContainer
  },
  inject: ['closePage', 'checkClosePage', 'createdTelRecordHandle'],
  props: {
    orderData: {
      type: Object,
      default: () => ({})
    },
    crmData: {
      type: Object,
      default: () => ({})
    },
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    }
  },
  data() {
    const validatorContent = (r, v, c) => {
      if (v.length <= 0) {
        c(new Error('请输入内容备注'))
        return
      } else if (v.length > 150) {
        c(new Error('最多输入150个字符'))
        return
      }
      c()
    }
    return {
      formData: {
        crmCallObject: '', // 通话对象
        crmCustomerCode: '', // 客户编码
        content: '', // 内容备注
        // 订单关联数据
        callOnlinePlatformCode: '',
        callOnlinePlatformName: '',
        callOnlineShopCode: '',
        callOnlineShopName: '',
        nickname: '',
        callOrderCode: ''
      },
      formRules: {
        crmCallObject: [{ required: true, message: '请选择通话对象', trigger: 'change' }],
        // crmCustomerCode: [{ required: true, message: '请输入客户编码', trigger: 'change' }],
        content: [
          { required: true, message: '请输入内容备注', trigger: 'change' },
          { required: true, validator: validatorContent, trigger: 'change' }
        ]
      },
      // 通话对象列表
      ObjectList: [],
      visible: false
    }
  },
  computed: {
    count() {
      const l = 150 - this.formData.content.length
      return l < 0 ? 0 : l
    }
  },
  watch: {
    orderData(v) {
      for (const key of Object.keys(this.formData)) {
        if (key === 'callOnlinePlatformCode') {
          this.$set(this.formData, key, v.platformCode)
        } else if (key === 'callOnlinePlatformName') {
          this.$set(this.formData, key, v.platformName)
        } else if (key === 'callOnlineShopCode') {
          this.$set(this.formData, key, v.stordCode)
        } else if (key === 'callOnlineShopName') {
          this.$set(this.formData, key, v.storeName)
        } else if (key === 'nickname') {
          this.$set(this.formData, key, v.buyer)
        } else if (key === 'callOrderCode') {
          this.$set(this.formData, key, v.pcode || v.saleOrderCode)
        }
      }
    },
    crmData(v) {
      this.$set(this.formData, 'crmCustomerCode', getValueByChain(v, 'clueCustomerCode', ''))
    }
  },
  created() {
    this.getCrmCallObject()
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
    },
    // 确定提交
    confirmHandle() {
      this.createdTelRecordHandle().then(() => {
        this.saveHandle()
      })
    },
    // 保存通话
    saveHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        data.id = this.recordId
        return putCreate(data).then(res => {
          this.$message.success('保存通话成功！')
          this.$emit('refresh', 'save')
          // 隐藏按钮
          this.visible = true
          // 关闭弹屏
          this.checkClosePage({ isSaveOther: true })
        })
      })
    },
    // 获取通话对象
    getCrmCallObject() {
      ccDict('CALLING_OBJECT').then(res => {
        this.ObjectList = res.data
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
